<template>
    <el-card class="box-card">
        <el-button type="primary" text @click="dialogFormVisible = true">+新增</el-button>
        <el-dialog v-model="dialogFormVisible" title="新增鱼缸" width="25%" v-if="status == '1' || status == '2'">
            <el-form :model="addAquariumModel">
                <el-form-item label="用户名" :label-width="70">
                    <el-input v-model="addAquariumModel.username" placeholder="请输入用户名" class="ipt" />
                </el-form-item>
                <el-form-item label="鱼缸编号" :label-width="70">
                    <el-input v-model="addAquariumModel.aquarium" placeholder="请输入鱼缸编号" class="ipt" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="addAquarium">提交</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogFormVisible" title="新增鱼缸" width="25%" v-else>
            <el-form :model="addAdminAquariumModel">
                <el-form-item label="用户名" :label-width="70">
                    <el-input v-model="addAdminAquariumModel.username" placeholder="请输入用户名" class="ipt" />
                </el-form-item>
                <el-form-item label="ip地址" :label-width="70">
                    <el-input v-model="addAdminAquariumModel.ip" placeholder="请输入ip地址" class="ipt" />
                </el-form-item>
                <el-form-item label="端口号" :label-width="70">
                    <el-input v-model="addAdminAquariumModel.port" placeholder="请输入端口号" class="ipt" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="addAdminAquarium">提交</el-button>
                </span>
            </template>
        </el-dialog>
        <el-table :data="aquariumMessages" style="width: 100%">
            <el-table-column prop="id" label="鱼缸编号" width="350" />
            <el-table-column prop="charge" label="负责人" width="350" />
            <el-table-column prop="fishNum" label="鱼数" width="300" />
            <el-table-column prop="phone" label="电话号码" width="300" />
            <el-table-column prop="gmtCreate" label="创建时间" />
        </el-table>
    </el-card>
</template>
<script setup lang="ts">
import { reactive, ref, Ref } from 'vue'
import { ApiGetMessages, ApiGetIdList, ApiAddAquarium, ApiAddAdminAquarium } from '@/apis/informations'
import { ElMessage } from 'element-plus'
interface aquariumMessageParm {
    id: number;
    charge: string;
    gmtCreate: string;
    fishNum: number;
    phone: string;
    value1: string;
    value2: string;
    value3: string;
    value4: string;
    value5: string;
}
interface addAquariumParm {
    aquarium: string,
    username: string
}
interface addAdminAquariumParm {
    username: string,
    ip: string,
    port: string
}
let status: Ref<string | null> = ref(sessionStorage.getItem('status'))
let aquariumMessages: Array<aquariumMessageParm> = reactive([])
const getMessages = async () => {
    let { data: res } = await ApiGetIdList()
    let userAquariumList: Array<number> = res.data.userAquariumList
    userAquariumList.forEach(async (item) => {
        let tmp = await ApiGetMessages(item)
        if (tmp != undefined) {
            aquariumMessages.push(tmp)
        }
    })
}
getMessages()

let dialogFormVisible = ref(false)
let addAquariumModel: addAquariumParm = reactive({ aquarium: '', username: '' })
let addAquarium = async () => {
    let bool: boolean = await ApiAddAquarium(addAquariumModel)
    if (bool) {
        ElMessage.success('添加成功')
        dialogFormVisible.value = false
    } else {
        ElMessage.error('添加失败,输入id的鱼缸不存在')
    }
}

let addAdminAquariumModel: addAdminAquariumParm = reactive({ username: '', ip: '', port: '' })
let addAdminAquarium = async () => {
    let bool: boolean = await ApiAddAdminAquarium(addAdminAquariumModel)
    if (bool) {
        ElMessage.success('添加成功')
        dialogFormVisible.value = false
    } else {
        ElMessage.error('添加失败,此ip和端口的鱼缸已存在')
    }
}


</script>
<style scoped lang="scss">
.box-card {
    margin-top: 20px;
}

.ipt {
    width: 90%;
    display: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>